<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #app {
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }

        ul li {
            list-style: none;
            margin-top: 15px;
            font-size: 20px;
        }
    </style>
</head>
<body>
  <div id="app">
      <div>
          <el-row style="height: 50px;line-height: 50px;background-color: #cccccc">
              <el-col :span="12" :offset="10">
                  <div >
                      欢迎光临蜗牛书城 &nbsp;|&nbsp;
                      <span th:if="${#strings.isEmpty(session.userInfo)}">
                          <a href="">登录</a> | <a href="">注册</a>
                      </span>

                      <span th:if="${!#strings.isEmpty(session.userInfo)}" >
                          &nbsp; <a href="">[[${session.userInfo.username}]]</a>
                      </span>
                      &nbsp;|&nbsp;<a href="">我的订单</a>  &nbsp;|&nbsp;
                      <a href="">我的购物车</a>
                      <span th:if="${!#strings.isEmpty(session.userInfo)}">
                          &nbsp;|&nbsp;<a href="">退出</a>
                      </span>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="20" :offset="2">
                  <div>
                      <ul>
                          <li v-for="a in addressList">
                              <el-radio v-model="addressId" :label="a.id" />
                              {{a.detailaddress}}&nbsp;{{a.code}} &nbsp;{{a.reciver}} &nbsp; {{a.reciverTel}}
                          </li>
                      </ul>

                      <el-button type="primary" @click="openAddAddressDialogFormVisible">添加薪地址</el-button>
                  </div>
              </el-col>
          </el-row>
      </div>

      <!--添加地址-->
      <el-dialog title="收货地址" :visible.sync="addAddressDialogFormVisible" :close-on-click-modal="false">
          <el-form :model="addressForm" :rules="addressFormRules" ref="addressForm">
              <el-form-item label="收获地址:" :label-width="formLabelWidth" prop="detailaddress">
                  <el-input v-model="addressForm.detailaddress" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="收货人:" :label-width="formLabelWidth" prop="reciver">
                  <el-input v-model="addressForm.reciver" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="收货人电话:" :label-width="formLabelWidth" prop="reciverTel">
                  <el-input v-model="addressForm.reciverTel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮编:" :label-width="formLabelWidth" prop="code">
                  <el-input v-model="addressForm.code" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="cancelAddressDialogFormVisible">取 消</el-button>
              <el-button type="primary" @click="addAddress">确 定</el-button>
          </div>
      </el-dialog>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="20" :offset="2">
                  <div>
                      <el-table
                              :data="cartList"
                              style="width: 100%">
                          <el-table-column
                                  label="封面"
                                  width="180">
                              <template slot-scope="scope">
                                  <el-image
                                          style="width: 100px; height: 100px;cursor: pointer"
                                          src="http://localhost:10001/a.jpg"
                                          fit="cover"></el-image>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  prop="bookVo.bname"
                                  label="图书名称"
                                  width="180">
                          </el-table-column>
                          <el-table-column
                                  prop="bookVo.price"
                                  label="单价"
                                  width="120px">
                          </el-table-column>
                          <el-table-column
                                  prop="buycount"
                                  label="数量"
                                  width="180px">
                          </el-table-column>
                          <el-table-column
                                  prop="allprice"
                                  label="小计"
                                  width="120px">
                          </el-table-column>
                      </el-table>
                  </div>
              </el-col>
          </el-row>
          <el-row style="margin-top: 30px">
              <el-col :span="6" :offset="16">
                  <div>
                      <span>总价 :{{allPrice}}元</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="danger" @click="submitOrder">提交订单</el-button>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div style="text-align: center">
                      版权所有，翻版必究
                  </div>
              </el-col>
          </el-row>
      </div>

      =================={{addressId}}==================

  </div>

  <script>
      let vueApp = new Vue({
          el:"#app",
          data:{
              addAddressDialogFormVisible:false,
              formLabelWidth:'180px',
              cartList:[
                  {
                      id:1,
                      buycount:10,
                      allprice:100,
                      book:{
                          id:1,
                          bname:'三国演义',
                          price:10
                      }
                  }
              ],
              addressList:[],
              allPrice:0 ,
              addressId:0 ,
              addressForm:{
                  id:0,
                  detailaddress:'',
                  reciver:'',
                  reciverTel:'',
                  code:''
              },
              addressFormRules:{
                  detailaddress:[
                      {required:true,message:'地址不能为空',trigger:'blur'}
                  ],
                  reciver:[
                      {required:true,message:'收货人不能为空',trigger:'blur'}
                  ],
                  reciverTel:[
                      {required:true,message:'手机号不能为空',trigger:'blur'},
                      {pattern:/^1[3-9][0-9]{9}$/,message:'符合手机号规则',trigger: 'blur'}
                  ],
                  code:[
                      {required:true,message:'邮编不能为空',trigger:'blur'},
                      {pattern:/^[0-9]{6}$/,message:'邮编只能是六位',trigger: 'blur'}
                  ]
              }
          },
          methods:{
              addAddress(){
                  let url = './address/add'
                  this.$refs.addressForm.validate((valid)=>{
                      if (!valid)  return ;
                      axios.post(url,this.addressForm)
                      .then((res)=>{
                          if (res.data.code == 200){
                              this.addressForm.id = res.data.data;
                              this.addressList.push(this.addressForm);

                              this.addAddressDialogFormVisible = false ;
                          }else {
                              this.$message({
                                  type:'error',
                                  message:res.data.msg,
                                  duration:1000
                              })
                          }
                      })
                  })
              },
              openAddAddressDialogFormVisible(){
                  this.addAddressDialogFormVisible = true ;
              },
              cancelAddressDialogFormVisible(){
                  this.addressForm = {};
                  this.addAddressDialogFormVisible = false ;
              },
              //这是真的提交订单
              submitOrder(){
                 let aid = this.addressId ;
                 if (aid == 0) {
                     alert("青选择地址！");
                     return ;
                 }
                  let idStr = localStorage.getItem("ids");
                  let idArr = idStr.split(",");  //购物车的id

                  let params = new URLSearchParams();
                  params.append('ids',idArr);
                  params.append("aid",aid);
                  let url = './order/submitOrder';
                  axios.post(url,params)
                  .then((res)=>{
                      if (res.data.code == 200){
                          this.$message({
                              type:'success',
                              message:res.data.msg,
                              duration:1000
                          })
                          this.initMyCart();  //刷新购物车
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  });
              },
              cal(){
                  //提交订单

                  /*let url = './cart/cal';
                  let params = new URLSearchParams();
                  params.append('ids',this.ids);
                  axios.post(url,params).then((res)=>{
                      if (res.data.code == 200) {
                          this.cartList = res.data.data ;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })*/
              },
              initMyCart(){
                  //获取 所有提交的di
                  let idStr = localStorage.getItem("ids");
                  let idArr = idStr.split(",");
                  let url = "./cart/submitCart";
                  let params = new URLSearchParams();
                  params.append('ids',idArr);

                  axios.post(url,params)
                  .then((res)=>{
                      if (res.data.code == 200) {
                          this.cartList = res.data.data ;
                          let allPrice = 0 ;
                          for (let c of res.data.data) {
                              allPrice += c.allprice;
                          }
                          this.allPrice = allPrice ;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })
              },
              initMyAddress(){
                  let url = './address/myAddress' ;
                  axios.get(url).then((res)=>{
                      if (res.data.code == 200){
                          this.addressList = res.data.data
                      } else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })
              }
          },
          created(){
              this.initMyCart();
              this.initMyAddress();
          }
      })
  </script>

</body>
</html>